<template>
  <div>
    <van-calendar
      readonly
      :formatter="formatter"
      color="#1370D1"
      :show-title="false"
      :poppable="false"
      :show-mark="false"
      :show-confirm="false"
      class="calender"
    />
  </div>
</template>
<script>
export default {
  methods: {
    formatter(day) {
      const month = day.date.getMonth() + 1
      const date = day.date.getDate()
      if (month === 1) {
        if (date === 4) {
          day.className ='calendar__day_bg'
        }
        if (date === 6 || date === 8 || date === 9 || date === 16) {
          day.className ='calendar__day_bg1'
        }
        if (date === 7 || date === 10 || date === 13 || date === 15) {
          day.className ='calendar__day_bg2'
        }
      }
      return day
    },
  },
}
</script>
<style lang="scss" scoped>
.calender {
  height: 335px;
}
::v-deep .van-calendar__day {
  height: 50px;
}
::v-deep .calendar__day_bg {
  &::before {
    position: absolute;
    bottom: 5px;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #FFC544;
  }
}
::v-deep .calendar__day_bg1 {
  &::before {
    position: absolute;
    bottom: 5px;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #48DBBB;
  }
}
::v-deep .calendar__day_bg2 {
  &::before {
    position: absolute;
    bottom: 5px;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #DD563F;
  }
}
</style>